<template>
  <div>
    <el-card>
      <el-form inline>
        <el-form-item label="一级分类" >
          <el-select v-model="category1Id" placeholder="请选择"  :disabled="isDisableShow">
            <el-option
            v-for="item in category1List"
              :label="item.name"
              :value="item.id"
              :key="item.id"
             
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select v-model="category2Id" placeholder="请选择" :disabled="isDisableShow">
            <el-option
            v-for="item in category2List"
              :label="item.name"
              :value="item.id"
               :key="item.id"
              
            >
            </el-option>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
          <el-select v-model="category3Id" placeholder="请选择" :disabled="isDisableShow">
            <el-option
            v-for="item in category3List"
              :label="item.name"
              :value="item.id"
               :key="item.id"
               
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {mapActions,mapState,mapMutations} from "vuex"
export default {
  name:"Classification",
  props:["isDisableShow"],
  data(){
    return {
    }
  },
  computed:{
    category1Id:{
      set(ne){
        this.GETCATEGORY1ID(ne)
      },
      get(){
        return this.$store.state.category.category1Id
      }
    },
    category2Id:{
      set(ne){
        this.GETCATEGORY2ID(ne)
      },
      get(){
        return this.$store.state.category.category2Id
      }
    },
    category3Id:{
      set(ne){
        this.GETCATEGORY3ID(ne)
      },
      get(){
        return this.$store.state.category.category3Id
      }
    },
    ...mapState("category",["category1List","category2List","category3List"])
  },
  methods:{
    ...mapActions("category",["getCategory1List","getCategory2List","getCategory3List"]),
    ...mapMutations("category",["GETCATEGORY1ID","GETCATEGORY2ID","GETCATEGORY3ID"])
  },
  mounted(){
    this.getCategory1List()
  },
  watch:{
    category1Id(){
      this.getCategory2List()
    },
    category2Id(){
      this.getCategory3List()
    },
    category3Id(){
      this.$bus.$emit("getList")
    },
  }
};
</script>

<style>
</style>